<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
    <button>发送</button>
    <div>
        
    </div>
    <script src="./ajax.js"></script>
    <script>
        document.querySelector("button").onclick=function(){
            // var xhr = new XMLHttpRequest();
            // // xhr.responseType='json'
            // // xhr.timeout = 4000
            // // xhr.ontimeout = function(){
            // //     alert("超时了 网络异常")
            // // }
            // // xhr.onerror=function(){
            // //     alert("网络出错了")
            // // }
            // xhr.open("get","http://127.0.0.1:8001/server?id=111");
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // xhr.setRequestHeader("name","mick");
            
            // xhr.send("这是前端发送的内容");

            // xhr.onreadystatechange=function(){
            //     if(xhr.readyState === 4){
            //         if(xhr.status >= 200 && xhr.status <= 300){
            //             console.log(xhr.status,xhr.statusText,xhr.getAllResponseHeaders,xhr.response,xhr.response.name);
            //         }
            //     }
            // };

            // // xhr.onload = function(){
            // //     console.log(xhr.status);
            // // }

            ajax({
                url:"http://127.0.0.1:8001/server",
                method:"post",
                // data:{
                //     str:"sfdsdfsf"
                // },
                // headers:{
                //     name: "123",
                //     // "Content-Type":"appplication/x-www-form-urlencoded"
                // },
                // contentType:'application/json',//'appplication/x-www-form-urlencoded'
                // params:{
                //     name: 111,
                //     pwd:"sdfsdf",
                    
                // },
                success:function(data,xhr){
                    console.log(data,xhr);
                },
                error:function(data,xhr){
                    console.log(data,xhr);
                }
            })
        };
        // function ajax(sourcesOption){
        //     const targetOption = {
        //         url:'',
        //         method:'get',
        //         data:{},
        //         headers:{
        //             "Content-Type":"appplication/x-www-form-urlencoded"
        //         },
        //         success:function(){
                    
        //         },
        //         error:function(){
                    
        //         }
        //     }
        //     Object.assign(targetOption.headers,sourcesOption.headers)
        //     Object.assign(targetOption,sourcesOption)
        //     let xhr = new XMLHttpRequest()
        //     let params = ''
        //     // xhr.responseType = 'json'
        //     if(targetOption.params){
        //         for(let item in targetOption.params){
        //         params += item + "=" + targetOption.params[item] + "&"
        //         } 
        //         params = params.substring(0,params.length - 1)
        //     }
        //     if(targetOption.data){
        //         params = ''
        //         for(let item in targetOption.data){
        //         params += item + "=" + targetOption.data[item] + "&"
        //         } 
        //         params = params.substring(0,params.length - 1)
        //     }
        //     switch(targetOption.method){
        //         case 'get' :
        //                     targetOption.url = targetOption.url + "?" + params
        //                     xhr.open(targetOption.method,targetOption.url)
        //                     xhr.send()
        //                     break
        //         case 'post' :
        //                     xhr.open(targetOption.method,targetOption.url)
        //                     let contentType = targetOption.headers["Content-Type"]
        //                     for(let item in targetOption.headers){
        //                         xhr.setRequestHeader(item,targetOption.headers[item])
        //                     }
        //                     if(contentType === "application/json"){
        //                         xhr.send(JSON.stringify(targetOption.data))
        //                     }else{
        //                         xhr.send(params)
        //                     }
        //                     break   
        //     }
        //     xhr.onreadystatechange=function(){
        //         if(xhr.readyState === 4){
        //             let contentType = xhr.getResponseHeader('Content-Type')
        //             let responseText = xhr.responseText
        //             if(contentType.includes("application/json")){
        //                 responseText = JSON.parse(responseText)
        //             }
        //             if(xhr.status >= 200 && xhr.status <= 300){
        //                 targetOption.success(responseText,xhr)
        //             }else{
        //                 targetOption.error(responseText,xhr)
        //             }
                    
        //         }
        //     }
        // }
    </script>
</body>
</html>